<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Popup - jQuery OncUI Demo</title>
	<style>
		.popup {
			border:1px solid #eee;background:#dadada;
		}
	</style>
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="../jquery.popup-0.1.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#btn1').click(function(event){
				$("#popup1").popup({
					'follow':'#btn1',
					'followPosition':'right',
				});
				return false;
			});
			$(document).click(function(e){
				$("#popup1").hide();
			});
			$('#btn2').click(function(event){
				$("#popup2").popup({
					'follow':'#btn2',
					'followPosition':'right',
				});
				return false;
			});
			/*
			$('#btn2').hover(function(){
					$("#popup2").popup({
						'follow':'#btn2',
						'followPosition':'bottomRight',
					});
				},function(){
					$("#popup2").hide();
				});
				 */
			/*
			*/
		});
	</script>
</head>
<body>
	<h1>Popup</h1>
	
	<div style="margin:10px 0;">
		<a href="javascript:void(0)" class="popupbtn" id="btn1" popup="#popup1">click</a>
		<ul style="list-style:none;">
			<li id="btn2" popup="#popup2"><a href="javascript:void(0)">hover</a>
			</li>
		</ul>

	</div>
			<div class="popup" id="popup2" style="display:none;">
				<ul>
					<li><a href="#">test1</a></li>
					<li><a href="#">test2</a></li>
					<li><a href="#">test</a></li>
					<li><a href="#">test</a></li>
					<li><a href="#">test</a></li>
					<li><a href="#">test</a></li>
					<li><a href="#">test</a></li>
				</ul>
			</div>
	<div class="popup" id="popup1" style="display:none;">
		<ul>
			<li><a href="javascript:alert('test');">alert</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
			<li><a href="#">test</a></li>
		</ul>
	</div>
</body>
</html>
